@view-transition {
  navigation: auto; 
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #F5E2CB;
}

/* Center everything */

.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 1;
}

/* Logo */

.logo-video {
    width: clamp(125px, 15vw, 250px);
    height: auto;
    filter: blur(2px);
    display: block;
}

/* Text */

.hero-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    font-size: clamp(1.5rem, 3vw, 3rem);
    font-weight: bold;
    color: black;
    letter-spacing: -0.15em;
    filter: blur(clamp(1.5px, 0.1vw, 3px));
    white-space: nowrap;
    text-decoration: none;

    transition: transform 0.3s ease;
}

.hero-text:hover {
    transform: translateY(calc(-50% - 4px));
}

.hero-text::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -0.35em;

    transform: translateX(-50%) scale(0.8);

    width: 90%;
    height: 0.45em;

    background: rgba(0, 0, 0, 0.18);

    border-radius: 50%;

    filter: blur(10px);

    opacity: 0;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;

    pointer-events: none;
}

.hero-text:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.left {
    right: calc(100% + clamp(2rem, 5vw, 6rem));
}

.right {
    left: calc(100% + clamp(2rem, 5vw, 6rem));
}


#loader {
    position: fixed;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    filter: blur(2px);
}

#loader video {
    width: clamp(125px, 15vw, 250px);
    height: auto;
}

.background-video {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: -2;

    filter: blur(3px);
}

#grain {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 9999;
}